<template>
  <div class='chartPart' id='topologyChart'></div>
</template>

<script>
import { queryTopology } from '@/api/index'
export default {
  data () {
    return {
      topologyData: [],
      images: [require('@/assets/images/zhuji.png'), require('@/assets/images/fuwuqi.png'), require('@/assets/images/shebei.png')]
    }
  },
  methods: {
    init () {
      this.$nextTick(() => {
        this.queryTopology()
      })
    },
    // 获取拓扑图数据
    queryTopology () {
      queryTopology().then(res => {
        if (res.code === 200) {
          this.topologyData = []
          this.topologyData = res.data
          this.initChart()
        }
      })
    },
    initChart () {
      // const _this = this
      // 重新设置图表宽度
      document.getElementById('topologyChart').style.width =
        document.getElementsByClassName('map')[0].clientWidth + 'px'
      document.getElementById('topologyChart').style.height =
        document.getElementsByClassName('map')[0].clientHeight + 'px'
      // 初始化图表
      var myChart = this.$echarts.init(document.getElementById('topologyChart'))
      var colors = [
        '#7aade8',
        '#a48fcc',
        '#a5cf7b',
        '#e9bc60',
        '#e6a29e',
        '#82b8ca',
        '#6db288',
        '#da986b',
        '#7bace9',
        '#60d08e'
      ]
      let that = this
      console.log(this.topologyData)
      var getdata = function getData () {
        let arr = that.topologyData
        arr = handle(arr, 0)
        return arr
      }
      var handle = function handleData (data, index, color = '#c06254') {
        // index标识第几层
        return data.map((item, index2) => {
          // 计算出颜色
          if (index === 1) {
            color = colors.find((item, eq) => eq === index2 % 10)
          }
          // 设置label大小
          switch (index) {
            case 0:
              // item.symbol = `image://${_this.images[0]}`
              item.symbolSize = 20
              break
            case 1:
              // item.symbol = `image://${_this.images[1]}`
              item.symbolSize = 20
              break
            default:
              // item.symbol = `image://${_this.images[2]}`
              item.symbolSize = 10
              break
          }
          // 设置线条颜色
          item.lineStyle = { color: color }

          if (item.children) {
            // 存在子节点
            item.itemStyle = {
              borderColor: color,
              color: color
            }
            item.children = handle(item.children, index + 1, color)
          } else {
            // 不存在
            item.itemStyle = {
              color: 'transparent',
              borderColor: color
            }
          }
          return item
        })
      }
      var option = {
        type: 'tree',
        tooltip: {
          // 提示框
          trigger: 'item',
          triggerOn: 'mousemove',
          backgroundColor: 'rgba(1,70,86,1)',
          borderColor: 'rgba(0,246,255,1)',
          borderWidth: 0.5,
          textStyle: {
            fontSize: 10
          }
        },
        series: [
          {
            type: 'tree',
            hoverAnimation: true, // hover样式
            data: getdata(),
            top: '10%',
            bottom: '5%',
            left: '10%',
            right: '5%',
            layout: 'orthogonal',
            symbolSize: 40,
            nodePadding: 20,
            animationDurationUpdate: 750,
            expandAndCollapse: true, // 子树折叠和展开的交互，默认打开
            initialTreeDepth: 3,
            roam: true, // 是否开启鼠标缩放和平移漫游。scale/move/true
            focusNodeAdjacency: true,
            itemStyle: {
              borderWidth: 1
            },
            label: {
              // 标签样式
              fontSize: 12,
              fontFamily: 'SourceHanSansCN',
              position: 'bottom',
              rotate: 0
            },
            lineStyle: {
              width: 1,
              curveness: 0.5
            }
          }
        ]
      }
      myChart.setOption(option)
      myChart.resize()
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang='scss' scoped>
#topologyChart {
  width: 100%;
  height: 100%;
}
</style>
